<template>
  <view class="container" v-if="goodsInfo">
    <u-navbar
      :is-back="false"
      :border-bottom="false"
      :background="{ backgroundColor: 'transparent' }"
    >
      <view class="slot-wrap">
        <view class="cus-back" @click="backView">
          <u-icon
            name="/static/goods-detail/back.png"
            size="36"
            color="#fff"
            class="uicon"
          ></u-icon>
          <view class="colooo"></view>
        </view>
        <view class="cus-back cus-gwc" @click="toCarPage()">
          <u-icon name="/static/goods-detail/gwc.png" size="36" color="#fff" class="uicon"></u-icon>
          <view class="colooo"></view>
          <text v-if="cartTotalNum > 0" class="cart-count">{{ cartTotalNum }}</text>
        </view>
        <view class="cus-back cus-share">
          <button
            open-type="share"
            style="
              position: initial;
              display: contents;
              margin: 0;
              padding: 0;
              border: none;
              background-color: transparent;
              overflow: auto;
              line-height: normal;
            "
          >
            <u-icon
              name="/static/goods-detail/sxyh.png"
              size="36"
              color="#fff"
              class="uicon"
            ></u-icon>
            <view class="colooo"></view>
          </button>
        </view>
      </view>
    </u-navbar>
    <view class="contentBg">
      <u-swiper
        :list="goodsInfo.sliderPicUrls"
        height="750"
        border-radius="0"
        mode="number"
        indicator-pos="bottomRight"
      ></u-swiper>
    </view>
    <view
      class="content"
      :style="{
        paddingTop: `${385 - statusBarHeight - navbarHeight}px`
      }"
    >
      <view class="goodsView">
        <view class="goodsTitle">{{ goodsInfo.name }}</view>
        <view class="dis-flex flex-y-center flex-y-between">
          <view class="goodsSales">已售{{ goodsInfo.salesCount }}</view>
          <view class="goodsSales"
            >起批{{ goodsInfo.limitMinQuantity }} 库存{{ goodsInfo.stock }}
          </view>
        </view>
        <view class="dis-flex flex-y-center flex-y-between">
          <view class="priceView">
            <view class="goodsPrice">
              <text class="goodsPrice-p" v-if="goodsInfo.priceMinYuan != goodsInfo.priceMaxYuan">
                ¥{{ goodsInfo.priceMinYuan }}~¥{{ goodsInfo.priceMaxYuan }}
              </text>
              <text class="goodsPrice-p" v-else> ¥{{ goodsInfo.priceMinYuan }} </text>
              <text style="margin-left: 10rpx; text-decoration: line-through; color: #666">
                ¥{{ goodsInfo.originPriceYuan }}
              </text>
              <text class="coupon" style="margin-left: 20rpx" v-if="goodsInfo.hasCoupon"
                >优惠券
              </text>
            </view>
          </view>
        </view>
        <view class="goods_tip dis-flex flex-y-start">
          <view class="vip-price">
            <text class="t">会员价:¥</text>
            <text class="n">{{ goodsInfo.vipPriceYuan }}</text>
          </view>
          <view class="point" style="margin-left: 20rpx" v-if="goodsInfo.pointDeductCount">
            {{ goodsInfo.pointDeductCount }}积分抵¥{{ goodsInfo.pointDeductPriceYuan }}
          </view>
          <view
            class="cryptocurrency"
            style="margin-left: 20rpx"
            v-if="goodsInfo.cryptocurrencyDeductCount"
          >
            {{ goodsInfo.cryptocurrencyDeductCount }}豆抵¥{{
              goodsInfo.cryptocurrencyDeductPriceYuan
            }}
          </view>
        </view>
      </view>
      <u-gap height="20"></u-gap>
      <view class="sku-box">
        <view class="sku-item dis-flex" v-if="goodsInfo.shop">
          <view class="item-t">发货</view>
          <view class="item-v">
            {{ goodsInfo.shop.provinceName }}{{ goodsInfo.shop.cityName }}
          </view>
        </view>
        <!-- <view class="sku-item dis-flex">
					<view class="item-t">运费</view>
					<view class="item-v">
						包邮
					</view>
				</view> -->
        <view class="sku-item dis-flex" v-if="goodsInfo.skus">
          <view class="item-t">规格</view>
          <view @click="onShowSku(3)" class="item-v dis-flex flex-y-center flex-y-between">
            <text>{{ goodsInfo.skus.length }}种规格</text>
            <u-icon name="/static/more.png" size="24"></u-icon>
          </view>
        </view>
      </view>
      <u-gap height="20"></u-gap>
      <view
        class="store dis-flex flex-y-center"
        v-if="goodsInfo.shop"
        @click="routeTo('/shops/store?shopId=' + goodsInfo.shop.id)"
      >
        <view style="border: 1rpx solid #f3f4f6; border-radius: 10rpx">
          <u-image :src="goodsInfo.shop.logo" width="130rpx" height="130rpx"></u-image>
        </view>
        <view class="store-info">
          <view class="top dis-flex flex-y-center flex-y-between">
            <view class="name">{{ goodsInfo.shop.name }}</view>
            <u-icon name="/static/more.png" size="24"></u-icon>
          </view>
          <view class="bot dis-flex flex-y-center flex-y-between">
            <view class="info">
              <text>{{ goodsInfo.shop.detailAddress }}</text>
              <text class="fenge">|</text>
              <text>评分：{{ goodsInfo.shop.score }}</text>
            </view>
            <view class="bt">进店逛逛</view>
          </view>
        </view>
      </view>

      <view
        v-if="comment && comment.user"
        class="comment-box"
        @click="
          routeTo(
            '/shops/goods-comment?shopId=' +
              goodsInfo.shopId +
              '&count=' +
              goodsInfo.shop.scoreLevel
          )
        "
      >
        <u-gap height="20"></u-gap>
        <view class="comment-top dis-flex flex-y-center flex-y-between">
          <view>商家评论({{ commentCount }}+)</view>
          <u-icon name="/static/more.png" size="24"></u-icon>
        </view>
        <view class="comment-info dis-flex">
          <view class="info-left-username">
            {{ comment.user.nickname }}
          </view>
          <view class="label">{{ comment.user.desensitizeMobile }}</view>
        </view>
        <view class="comment-content">
          {{ comment.content }}
        </view>
      </view>
      <view class="pickupView">
        <view class="sectionTitle">商品详情</view>
        <u-parse :html="goodsInfo.description" :tag-style="tagStyle"></u-parse>
      </view>
      <u-gap height="120"></u-gap>
      <view class="footer-fil"></view>
      <vk-data-goods-sku-popup
        ref="skuPopup"
        v-model="skuPopup"
        border-radius="20"
        :localdata="skuInfo"
        :mode="skuMode"
        goodsThumbName="image"
        buy-now-background-color="#10A28F"
        goodsThumbBackgroundColor="#f5f5f5"
        add-cart-background-color="#FF6F10"
        @cart="onAddCart"
        @buy="onGoodsBuy"
      >
      </vk-data-goods-sku-popup>
      <submitBar
        @store="toStore"
        :canFollow="goodsInfo.favorite"
        @contact="toContact"
        @follow="toFollow"
        :isStore="true"
        :isFollow="true"
        :isContect="true"
        @add="onShowSku(2)"
        @pay="onShowSku(3)"
      >
      </submitBar>
    </view>
  </view>
</template>

<script>
import submitBar from '@/components/submit-bar.vue'

let systemInfo = uni.getSystemInfoSync()
export default {
  components: {
    submitBar
  },

  data() {
    return {
      skuPopup: false,
      goodsId: null,
      tagStyle: {
        table: 'border-collapse: collapse;',
        td: 'border: 1px solid #ccc;line-height: 1.5;min-width: 50px;padding: 3px 5px;text-align: left;'
      },
      comment: {},
      commentCount: 0,
      goodsInfo: {},
      cartTotalNum: 0,
      skuMode: 3,
      skuInfo: {},
      statusBarHeight: systemInfo.statusBarHeight
    }
  },
  onLoad(options) {
    this.goodsId = options.goodsId || '0'
    this.$u.api
      .getGoodsDetails({
        id: this.goodsId
      })
      .then((res) => {
        this.goodsInfo = res.data
        res.data.sku_list = res.data.uniapp.sku_list
        res.data.sku_list.forEach((item) => {
          item.price = (item.price * 0.01).toFixed(2)
        })
        res.data.spec_list = res.data.uniapp.spec_list
        this.skuInfo = res.data
        this.getComment()
      })
  },
  onShow() {
    this.calcCartGoodsCount()
  },
  computed: {
    // 转换字符数值为真正的数值
    navbarHeight() {
      // #ifdef APP-PLUS || H5
      return this.height ? this.height : 50
      // #endif
      // #ifdef MP
      // 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
      // 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
      // return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
      let height = systemInfo.platform == 'ios' ? 44 : 48
      return this.height ? this.height : height
      // #endif
    }
  },
  methods: {
    calcCartGoodsCount() {
      const self = this
      self.$u.api.getCartList().then((res) => {
        let totalNum = 0
        res.data.forEach((gorup) => {
          gorup.items.forEach((item) => {
            //totalNum += 1
            totalNum += item.count
          })
        })
        self.cartTotalNum = totalNum
      })
    },
    routeTo(url) {
      uni.navigateTo({
        url: url
      })
    },
    getComment() {
      this.$u
        .get('/app-api/product/comment/page', {
          type: 1,
          shopId: this.goodsInfo.shopId,
          pageNo: 1,
          pageSize: 1
        })
        .then((res) => {
          this.commentCount = res.data.total
          if (this.commentCount > 0) this.comment = res.data.list[0]
        })
    },
    toCarPage() {
      uni.navigateTo({
        url: '/pages/cart/cart'
      })
    },
    toContact() {
      // 聊天需要确保已登录
      if (!this.$utils.checkLogin(true)) {
        return
      }
      uni.navigateTo({
        url:
          '/other/customer-chat/customer-chat?userId=' +
          this.goodsInfo.shop.userId +
          '&shopId=' +
          this.goodsInfo.shop.id
      })
    },
    toFollow() {
      this.$u
        .post('/app-api/product/favorite/toggle', {
          spuId: this.goodsId
        })
        .then((res) => {
          if (res.code === 0) {
            let msg = this.goodsInfo.favorite ? '已取消' : '收藏成功'
            this.$u.toast(msg)
            this.goodsInfo.favorite = !this.goodsInfo.favorite
          } else {
            this.$u.toast(res.msg)
          }
        })
    },
    backView() {
      uni.navigateBack()
    },
    onAddCart(item) {
      let self = this
      self.$u.api
        .setCartAdd({
          skuId: item._id,
          count: item.buy_num
        })
        .then((res) => {
          self.$u.toast('添加成功')
          self.skuPopup = false
          self.calcCartGoodsCount()
        })
    },
    toStore() {
      uni.navigateTo({
        url: '/shops/store?shopId=' + this.goodsInfo.shop.id
      })
    },
    onGoodsBuy(item) {
      // {"_id":"1873984487220756482","goods_id":"1873984485752750081","goods_name":"男鸭舌帽包头帽护耳帽冷帽男韩版男士毛线帽冬天防寒保暖针织帽子","price":"12.80","group_price":1280,"snap_price":1280,"image":"","stock":998,"spec_value_ids":["1873983929936166913"],"sku_name_arr":["藏青色"],"buy_num":1}
      let items = []
      items.push({
        skuId: item._id,
        count: item.buy_num
      })
      this.$utils.route({
        url: '/goods/order-confirm/order-confirm',
        params: {
          items: JSON.stringify(items)
        }
      })
    },
    onShowSku(index) {
      this.skuMode = index
      this.skuPopup = true
    }
  }
}
</script>

<style lang="scss" scoped>
.slot-wrap {
  display: flex;
  align-items: center;
  padding-left: 20rpx;

  .cus-back {
    position: relative;
    text-align: center;

    .uicon {
      z-index: 99;
      position: relative;
      font-weight: 100;
    }

    .colooo {
      width: 56rpx;
      height: 56rpx;
      background: #000000;
      border-radius: 50%;
      opacity: 0.5;
      position: absolute;
      top: -10rpx;
      left: -10rpx;
    }

    .cart-count {
      width: 44rpx;
      height: 44rpx;
      position: absolute;
      top: -10rpx;
      left: 25rpx;
      background: red;
      border-radius: 50%;
      color: white;
      font-size: 28rpx;
    }
  }

  .cus-gwc {
    margin-left: 334rpx;
  }

  .cus-share {
    margin-left: 50rpx;
  }
}

.contentBg {
  width: 100%;
  position: absolute;
  top: 0px;
  height: auto;
}

.content {
  position: relative;
  padding-top: 650rpx;

  .store {
    height: 180rpx;
    background: #ffffff;
    padding: 25rpx 20rpx;

    .store-info {
      margin-left: 20rpx;
      flex: 1;

      .top {
        margin-bottom: 20rpx;

        .name {
          font-size: 30rpx;
          color: #333333;
        }
      }

      .bot {
        font-size: 24rpx;
        color: #666666;

        .fenge {
          margin: 0 10rpx;
        }

        .bt {
          width: 128rpx;
          height: 50rpx;
          line-height: 50rpx;
          background: #10a28f;
          border-radius: 10rpx;
          color: #ffffff;
          text-align: center;
        }
      }
    }
  }

  .goodsView {
    // height: 200rpx;
    position: relative;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 12rpx;
    padding: 30rpx 20rpx;

    .goodsTitle {
      font-size: 30rpx;
      color: #333333;
      margin-bottom: 10rpx;
    }

    .goodsSales {
      font-size: 26rpx;
      color: #999999;
      margin-bottom: 20rpx;
    }

    .goodsPrice {
      .goodsPrice-p {
        font-size: 36rpx;
        font-weight: bold;
        color: #fa453c;
      }
    }
  }

  .pickupView {
    background: #ffffff;
    border-radius: 12rpx;
    padding: 20rpx;
    margin-top: 20rpx;
    text-align: center;
    font-size: 32rpx;
    color: #333333;
  }

  .comment-box {
    padding: 30rpx 20rpx;
    background-color: #fff;

    .comment-top {
      font-weight: 600;
      font-size: 30rpx;
      color: #333333;
      margin-bottom: 20rpx;
    }

    .comment-info {
      margin-bottom: 20rpx;

      .info-left-username {
        font-size: 28rpx;
        color: #333333;
        margin-right: 10rpx;
      }

      .label {
        background: #fa453c;
        border-radius: 8rpx;
        font-size: 22rpx;
        color: #ffffff;
        padding: 2rpx 10rpx;
      }
    }

    .comment-content {
      font-size: 26rpx;
      color: #333333;
    }
  }

  .sku-box {
    padding: 0 20rpx;
    background-color: #fff;

    .sku-item {
      padding: 30rpx 0;
      border-bottom: 1rpx solid #e6e6e6;

      .item-t {
        font-size: 30rpx;
        color: #666666;
        width: 100rpx;
      }

      .item-v {
        flex: 1;
        font-size: 30rpx;
        color: #333333;
      }
    }

    .sku-item:last-child {
      border: none;
    }
  }
}

.coupon {
  background: #ebfaf8;
  font-size: 20rpx;
  color: #10a28f;
  padding: 4rpx 10rpx;
  border-radius: 20rpx;
}

.vip-price {
  margin-top: 5rpx;
  font-size: 26rpx;
  color: #fa453c;
}

.goods-point {
  align-items: center;

  .point {
    margin-top: 5rpx;
    font-size: 26rpx;
    color: #ff6f10;
  }
}

.cryptocurrency {
  margin-top: 5rpx;
  font-size: 26rpx;
  color: #ff6f10;
}
</style>
